{% extends "base.html" %} {% block html_title %} 积分排行榜 {% endblock html_title %}
{% block page_title %} 积分排行榜 {% endblock page_title %} {% block content %}
<div id="content">
    <el-row>
        <input type="text" placeholder='输入玩家昵称' @keyup.enter='queryByNickname' v-model="qs" style='padding:7px;border-radius: 5px;border:none'> {#
        <input type="text" placeholder='输入玩家昵称' v-model="qs" @input="queryByNickname" style='padding:7px;border-radius: 5px;border:none'>#}
        <button type='submit' @click="queryByNickname" style='padding:7px 20px;outline:none;border:none;margin-left:10px;border-radius:5px;background:#3c8dbc;color:white'>搜索</button>
    </el-row>
    <el-row>
        <el-table :data="players" @row-click="onTableRowClick">
            <el-table-column prop="nickname" label="玩家昵称">
            </el-table-column>
            <el-table-column prop="wxid" label="微信id">
            </el-table-column>
{#            <el-table-column prop="earnedAmount" label="盈亏">#}
{#            </el-table-column>#}
{#            <el-table-column prop="upPoint" label="总上分">#}
{#            </el-table-column>#}
{#            <el-table-column prop="downPoint" label="总下分">#}
{#            </el-table-column>#}
            <el-table-column prop="totalPoint" label="余分" width="62">
            </el-table-column>
{#            <el-table-column prop="agent" label="上线" sortable>#}
{#            </el-table-column>#}
        </el-table>
    </el-row>
    <el-row>
        <el-pagination background layout="prev, pager, next" :total="playerCount" page-size=30 :current-page.sync="currentPage" @current-change="onCurrentPageChanged">
        </el-pagination>
    </el-row>
</div>
{% endblock content %}
{% block js %}
<script>
var container = new Vue({
    el: "#content",
    data: function() {
        return {
            currentPage: 1,
            qs: '',
            playerCount: 0,
            players: []
        }
    },
    methods: {
        onTableRowClick: function(row, event, column) {
            console.log(row);
            location.href = "/player/" + row.wxid;
        },
        onCurrentPageChanged: function(currentPage) {
            this.refreshPlayerList();
        },
        refreshPlayerList: function() {
            var params = {};
            params.page = this.currentPage - 1;
            if (this.qs !== '') {
                params.qs = this.qs;
            }
            this.$http.get('/api/player/', {
                params: params
            }).then((res) => {
                this.players = res.data.players;
                this.playerCount = res.data.count;
            });
        },
        queryByNickname: function(v) {
            console.log('keyup enter')
            this.refreshPlayerList();
        }
    },
    created: function() {
        this.refreshPlayerList();
    }
});
</script>
{% endblock js %}